<template>
  <div class="content">
    <div class="navList">
      <div class="listItem">
        <text class="text" @click="beginTM">{{bgtm}}</text>
      </div>
      <div class="listItem">
        <text class="text" @click="endTM">{{edtm}}</text>
      </div>
    </div>
    <div class="table">
      <grid :head="gridHead" :grid="gridData"/>
    </div>
  </div>
</template>
<script>
  import grid from '@/components/scrollGrid'
  import event from '@/net/event.js'
  import { getCache } from '@/util/storageUtils.js'
  import { CTCE_SBID } from '@/config/storageTypes.js'
  const navigator = weex.requireModule('navigator')
  const picker = weex.requireModule('picker')

  export default {
    name: 'historyData',
    components: { 
      grid
    },
    data: () => ({
      bgtm: '2018-04-01',
      edtm: '2018-05-17',
      gridHead: [
        { name: 'CJSJ', value: '采集时间'},
        { name: 'YXMS', value: '运行模式'},
        { name: 'JSWD', value: '进水温度'},
        { name: 'CSWD', value: '出水温度'},
        { name: 'SNWD', value: '室内温度'},
        { name: 'SWWD', value: '室外温度'},
        { name: 'SDWD', value: '设定温度'},
        { name: 'YXZT', value: '运行状态'}
      ],
      gridData: []
    }),
    beforeCreate () {
      this.$notice.loading.show()
    },
    created () {
      this.$navigator.setNavigationInfo({
        title: '历史数据',
        navShow: true,
        statusBarStyle: 'LightContent'
      })
      getCache(CTCE_SBID).then(val => {
        event.HistoryData(val, this.bgtm, this.edtm).then(res => {
          this.gridData = res.result.datalist
          this.$nextTick(() => {
            this.$notice.loading.hide()
          })
        })
      })
    },
    methods: {
      beginTM () {
        picker.pickDate({
          value: this.bgtm
        }, e => {
          if (e.result === 'success') {
            this.bgtm = e.data
            this.$notice.loading.show()
            getCache(CTCE_SBID).then(val => {
              event.HistoryData(val, e.data, this.edtm).then(res => {
                this.gridData = res.result.datalist
                this.$nextTick(() => {
                  this.$notice.loading.hide()
                })
              })
            })
          }
        })
      },
      endTM () {
        picker.pickDate({
          value: this.edtm
        }, e => {
          if (e.result === 'success') {
            this.edtm = e.data
            this.$notice.loading.show()
            getCache(CTCE_SBID).then(val => {
              event.HistoryData(val, this.bgtm, e.data).then(res => {
                this.gridData = res.result.datalist
                this.$nextTick(() => {
                  this.$notice.loading.hide()
                })
              })
            })
          }
        })
      }
    }
  };
</script>
<style scoped>
.content {
  width: 750px;
  margin-bottom: 64.6px;
  flex: 1;
}
.navList{
  width: 750px;
  height: 93.7px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom-color: #eee;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.listItem{
  width: 375px;
  height: 40px;
  border-right-color:#e7e5e5;
  border-right-style: solid;
  border-right-width: 1px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.text{
  font-size: 29.1px;
  font-family: PingFangSC-Regular;
  color: rgba(102,102,102,1);
}
.table {
  flex: 1;
}
</style>
